<!--
@description ：服务计划配置
-->
<template>
  <div class="wrap" v-loading="pageLoading">
    <div class="header-btn">
      <div class="title-text">任务条件：
        <span v-for="(item, i) in enumOpt.taskTypeList" :key="item.dictLabel">
          <span v-if="item.dictValue == heardData.tasktype">{{item.dictLabel}}；</span>
          <!-- 应交前续收； -->
        </span>
        <span v-for="(item, n) in enumOpt.manageComList" :key="item.dictLabel">
          <span v-if="item.dictValue == heardData.institution">{{item.dictLabel}}；</span>
          <!--上海分公司  -->
        </span>
        <span v-for="(item, m) in enumOpt.channelList" :key="item.dictLabel">
          <span v-if="item.dictValue == heardData.branchtype">{{item.dictLabel}}；</span>
          <!--；个险；  -->
        </span>
        <span v-for="(item, a) in enumOpt.insuranceTypeList" :key="item.dictLabel">
          <span v-if="item.dictValue == heardData.policytype">{{item.dictLabel}}；</span>
          <!--孤儿单  -->
        </span>

      </div>
      <div @click="goBack" class="title-back-box">
        <img src="../../../assets/image/back_r.png" alt="">
        返回服务计划列表
      </div>
    </div>

    <div class="card-wrap">
      <div class="g-card" style="padding-bottom: 16px;margin-top: 10px;width: 275px;height:430px;">
        <div class="title-header header-line" style="border-bottom:0;">触达方式</div>
        <div class="text-t">在各时间节点添加合适的触达方式，构建触达策略</div>

        <div class="opt-item">智能外呼</div>
        <div class="opt-item" style="margin: 10px">发送短信</div>
        <div class="opt-item">人工服务</div>
      </div>

      <div class="g-card right-card" style="width: calc(100% - 275px - 16px);height:430px;">
        <div class="s-columns-box" :style="{'width': 214 * 3 + 'px'}">
          <div v-for="(item, n) in list" :key="n" class="s-columns">
            <div class="s-columns-title">
              <span>t{{item.time > 0 ? ('+' + item.time) : (item.time || '')}}</span>
              <div class="cha-cha-box">
                <i @click="list.splice(n,1)" class="el-icon-close cha-cha"></i>
              </div>
            </div>
            <div class="s-column-item-box">
              <div v-if="item.waihu" @click="showItem(item,'waihu')" class="s-column-item">
                <div class="img-box">
                  <img src="../../../assets/image/waihu.png" alt="">
                </div>
                <div class="item-text"><a style="color: rgb(8, 117, 255);">智能外呼</a></div>
                <i class="el-icon-document" style="margin:0 5px;color:rgb(0, 177, 101);font-size:16px"></i>
                <i @click.stop="deleteIten(item,'waihu')" class="el-icon-delete"
                  style="color:rgba(246, 25, 25, 0.84);font-size:16px"></i>
              </div>
              <i v-else @click="addItem(item,'waihu')" class="el-icon-circle-plus-outline item-plus"></i>
            </div>
            <div class="s-column-item-box" style="margin: 10px 0">
              <div v-if="item.note" @click="showItem(item,'note')" class="s-column-item">
                <div class="img-box" style="background:#FFF8F8">
                  <img src="../../../assets/image/note.png" alt="">
                </div>
                <div class="item-text" style="background:#FFF8F8"><a style="color: rgba(246, 25, 25, 0.84);">发送短信</a>
                </div>
                <i class="el-icon-document" style="margin:0 5px;color:rgb(0, 177, 101);font-size:16px"></i>
                <i @click.stop="deleteIten(item,'note')" class="el-icon-delete"
                  style="color:rgba(246, 25, 25, 0.84);font-size:16px"></i>
              </div>
              <i v-else @click="addItem(item,'note')" class="el-icon-circle-plus-outline item-plus"></i>
            </div>
            <div class="s-column-item-box">
              <div v-if="item.rengong" @click="showItem(item,'rengong')" class="s-column-item">
                <div class="img-box" style="background:#F2FCF8">
                  <img src="../../../assets/image/rengong.png" alt="">
                </div>
                <div class="item-text" style="background:#F2FCF8"><a style="color: rgb(88, 202, 134);">人工服务</a></div>
                <i class="el-icon-document" style="margin:0 5px;color:rgb(0, 177, 101);font-size:16px"></i>
                <i @click.stop="deleteIten(item,'rengong')" class="el-icon-delete"
                  style="color:rgba(246, 25, 25, 0.84);font-size:16px"></i>
              </div>
              <i v-else @click="addItem(item,'rengong')" class="el-icon-circle-plus-outline item-plus"></i>
            </div>
          </div>
          <div class="s-columns">
            <div class="s-columns-title" style="line-height: 48px;" @blur.capture="numBlur">
              <!--  type="number" @blur="numBlur" -->
              <el-input v-model="num" ref="num" placeholder="请输入" style="width: 88%;" />
            </div>
          </div>
        </div>

        <div class="botton-btns">
          <!-- goBack -->
          <el-button plain type="info" icon="el-icon-refresh-right" @click="goBack">取消</el-button>
          <el-button type="primary" @click="submit" :loading="loading">提交</el-button>
        </div>
      </div>
    </div>

    <el-dialog :close-on-click-modal="false" title="" :show-close="false" :visible.sync="waihuVisible">
      <el-form ref="waihuForm" label-width="170px" label-position="right" :model="waihuForm" :rules="waihuFormRules">
        <el-form-item label="外呼模板BOT" prop="a">
          <el-select v-model="waihuForm.a" placeholder="请选择" clearable filterable style="width: 60%;">
            <el-option v-for="item in waihuAList" :key="item.dictValue" :value="item.dictValue"
              :label="item.dictLabel"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="呼叫执行时间" prop="ttt">
          <div v-for="(item, index) in waihuForm.ttt" :key="index" class="time-picker-box">
            <el-time-picker is-range v-model="waihuForm.ttt[index]" range-separator="至" start-placeholder="开始时间"
              end-placeholder="结束时间" placeholder="选择时间范围" style="width: 60%;" format="HH:mm:ss" value-format="HH:mm:ss">
            </el-time-picker>
            <i class="el-icon-circle-plus-outline conIcon"
              style="margin-left: 8px;bottom: 0px;color: rgb(38, 149, 212);right: 64px;font-size: 24px"
              @click="waihuForm.ttt.push(JSON.parse(pickerItem))"></i>
            <i v-if="waihuForm.ttt.length != 1" class="el-icon-remove-outline conIcon"
              style="margin-left: 8px;bottom: 0px;color: #F23031;right: 34px;font-size: 24px"
              @click="waihuForm.ttt.splice(index, 1)"></i>
          </div>
        </el-form-item>
        <el-form-item prop="d" label="并发数量">
          <el-select v-model="waihuForm.d" placeholder="请选择" clearable filterable style="width: 60%;">
            <el-option v-for="item in waihuDList" :key="item.dictValue" :value="item.dictValue"
              :label="item.dictLabel"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="e" label="未接通后是否发送短信">
          <el-select v-model="waihuForm.e" placeholder="请选择" clearable filterable style="width: 60%;">
            <el-option v-for="item in waihuEList" :key="item.dictValue" :value="item.dictValue"
              :label="item.dictLabel"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="f" label="发送短信模板">
          <el-select v-model="waihuForm.f" placeholder="请选择" clearable filterable style="width: 60%;">
            <el-option v-for="item in waihuFList" :key="item.dictValue" :value="item.dictValue"
              :label="item.dictLabel"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否二次外呼" prop="vlFlag">
          <el-switch v-model="waihuForm.vlFlag" active-color="#082aff" inactive-color="#DCDFE6" />
        </el-form-item>
        <el-form-item v-if="waihuForm.vlFlag" label="呼叫执行时间" prop="h">
          <el-input-number v-model="waihuForm.h" placeholder="请输入" style="" controls-position="right" />
          小时后开始执行二次外呼任务
        </el-form-item>
        <div class="dialog-fromBtn">
          <el-button type="info" icon="el-icon-refresh-right" plain @click="cancelItem">取 消</el-button>
          <el-button type="primary" @click="submitItem">保存并提交</el-button>
        </div>
      </el-form>
    </el-dialog>

    <el-dialog :close-on-click-modal="false" title="" :show-close="false" :visible.sync="noteVisible" width="600px">
      <el-form ref="noteForm" label-width="120px" label-position="right" :model="noteForm" :rules="noteFormRules">
        <el-form-item prop="a" label="短信模版">
          <el-select v-model="noteForm.a" placeholder="请选择" clearable filterable style="width: 320px">
            <el-option v-for="item in noteAList" :key="item.dictValue" :value="item.dictValue"
              :label="item.dictLabel"></el-option>
          </el-select>
        </el-form-item>
        <div class="note-muban">
          尊敬的**先生/女士，您的保险合同（保单号*******）将于****年**月**日进入交费期，本次需交金额****元，我们将从您****银行尾号****的授权账户划转，请确保您的账户状态正常并存入足额保费。如有疑问，请与您的服务人员联系，或致电400-888-8888咨询。
        </div>
        <el-form-item label="短信发送时间" prop="ttt">
          <div v-for="(item, index) in noteForm.ttt" :key="index" class="time-picker-box">
            <el-time-picker is-range v-model="noteForm.ttt[index]" range-separator="至" start-placeholder="开始时间"
              end-placeholder="结束时间" placeholder="选择时间范围" style="width: 320px" format="HH:mm:ss"
              value-format="HH:mm:ss">
            </el-time-picker>
            <i class="el-icon-circle-plus-outline conIcon"
              style="margin-left: 8px;bottom: 0px;color: rgb(38, 149, 212);right: 64px;font-size: 24px"
              @click="noteForm.ttt.push(JSON.parse(pickerItem))"></i>
            <i v-if="noteForm.ttt.length != 1" class="el-icon-remove-outline conIcon"
              style="margin-left: 8px;bottom: 0px;color: #F23031;right: 34px;font-size: 24px"
              @click="noteForm.ttt.splice(index, 1)"></i>
          </div>
        </el-form-item>
        <el-form-item label="是否包含链接" prop="vlFlag">
          <el-switch v-model="noteForm.vlFlag" active-color="#082aff" inactive-color="#DCDFE6" />
        </el-form-item>
        <el-form-item prop="h" label="短信链接" v-if="noteForm.vlFlag">
          <el-select v-model="noteForm.h" placeholder="请选择" clearable filterable style="width: 320px">
            <el-option v-for="item in noteHList" :key="item.dictValue" :value="item.dictValue"
              :label="item.dictLabel"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div class="dialog-fromBtn">
        <el-button type="info" icon="el-icon-refresh-right" plain @click="cancelItem">取 消</el-button>
        <el-button type="primary" @click="submitItem">保存并提交</el-button>
      </div>
    </el-dialog>

    <el-dialog :close-on-click-modal="false" title="" :show-close="false" :visible.sync="rengongVisible">
      <el-form ref="rengongForm" label-width="120px" label-position="right" :model="rengongForm"
        :rules="rengongFormRules">
        <el-form-item prop="a" label="服务方式">
          <el-select v-model="rengongForm.a" placeholder="请选择" clearable filterable style="width: 320px">
            <el-option v-for="item in rengongDList" :key="item.dictValue" :value="item.dictValue"
              :label="item.dictLabel"></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="建议时间段" prop="ttt">
          <div v-for="(item, index) in rengongForm.ttt" :key="index" class="time-picker-box">
            <el-time-picker is-range v-model="rengongForm.ttt[index]" range-separator="至" start-placeholder="开始时间"
              end-placeholder="结束时间" placeholder="选择时间范围" format="HH:mm:ss" value-format="HH:mm:ss"
              style="width: 320px">
            </el-time-picker>
            <i class="el-icon-circle-plus-outline conIcon"
              style="margin-left: 8px;bottom: 0px;color: rgb(38, 149, 212);right: 64px;font-size: 24px"
              @click="rengongForm.ttt.push(JSON.parse(pickerItem))"></i>
            <i v-if="rengongForm.ttt.length != 1" class="el-icon-remove-outline conIcon"
              style="margin-left: 8px;bottom: 0px;color: #F23031;right: 34px;font-size: 24px"
              @click="rengongForm.ttt.splice(index, 1)"></i>
          </div>
        </el-form-item> -->
        <el-form-item label="是否主管陪访" prop="vlFlag">
          <el-switch v-model="rengongForm.vlFlag" active-color="#082aff" inactive-color="#DCDFE6" />
        </el-form-item>
        <div class="dialog-fromBtn">
          <el-button type="info" icon="el-icon-refresh-right" plain @click="cancelItem">取 消</el-button>
          <el-button type="primary" @click="submitItem">保存并提交</el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "ServicePlanConfig", //服务计划配置
  data() {
    return {
      heardData: {},
      loading: false,
      pickerItem: JSON.stringify(["00:00:00", "23:59:59"]),
      pageLoading: false,
      num: "",
      list: [
        {
          time: -30,
          waihu: false,
          note: false,
          rengong: false,
          rule: {},
        },
      ],
      typeStr: "",
      modalType: 1,
      item: {},
      dictList: [],

      waihuVisible: false,
      waihuForm: {
        a: "",
        vlFlag: false,
        ttt: [["00:00:00", "23:59:59"]],
        d: "",
      },
      waihuFormRules: {
        a: [{ required: true, message: "请选择短信模板", trigger: "change" }],
        ttt: [
          {
            required: true,
            message: "请选择呼叫执行时间",
            type: "array",
            trigger: "change",
          },
        ],
        vlFlag: [
          { required: true, message: "请选择是否包含链接", trigger: "change" },
        ],
        d: [{ required: true, message: "请选择并发数量", trigger: "change" }],
        e: [
          {
            required: true,
            message: "请选择未接通后是否发送短信",
            trigger: "change",
          },
        ],
        f: [
          { required: true, message: "请选择发送短信模板", trigger: "change" },
        ],
        h: [
          {
            required: true,
            message: "请输入呼叫执行时间",
            trigger: ["blur", "change"],
          },
        ],
      },
      waihuAList: [
        {
          dictValue: "1",
          dictLabel: "应交前催交提醒",
        },
      ],
      waihuDList: [
        {
          dictValue: "1",
          dictLabel: "1",
        },
        {
          dictValue: "2",
          dictLabel: "2",
        },
      ],
      waihuEList: [
        {
          dictValue: "1",
          dictLabel: "是",
        },
        {
          dictValue: "2",
          dictLabel: "否",
        },
      ],
      waihuFList: [
        {
          dictValue: "1",
          dictLabel: "催交短信 A 模板",
        },
        {
          dictValue: "2",
          dictLabel: "催交短信 B 模板",
        },
      ],

      noteVisible: false,
      noteForm: {
        a: "1",
        ttt: [["00:00:00", "23:59:59"]],
        vlFlag: false,
        h: "1",
      },
      noteFormRules: {
        a: [{ required: true, message: "请选择短信模板", trigger: "change" }],
        ttt: [
          {
            required: true,
            message: "请选择短信发送时间",
            type: "array",
            trigger: "change",
          },
        ],
        vlFlag: [
          { required: true, message: "请选择是否包含链接", trigger: "change" },
        ],
        h: [{ required: true, message: "请输入短信链接", trigger: "change" }],
      },
      noteAList: [
        {
          dictValue: "1",
          dictLabel: "催交短信 A 模板",
        },
      ],
      noteHList: [
        {
          dictValue: "1",
          dictLabel: "A 链接",
        },
        {
          dictValue: "2",
          dictLabel: "B 链接",
        },
      ],

      rengongVisible: false,
      rengongForm: {
        a: "",
        vlFlag: false,
        // ttt: [["00:00:00", "23:59:59"]],
      },
      rengongFormRules: {
        a: [{ required: true, message: "请选择服务方式", trigger: "change" }],
        vlFlag: [
          { required: true, message: "请选择是否主管陪访", trigger: "change" },
        ],
      },
      rengongDList: [
        {
          dictValue: "1",
          dictLabel: "电话联系客户",
        },
        {
          dictValue: "2",
          dictLabel: "网络联系客户",
        },
        {
          dictValue: "3",
          dictLabel: "面访客户",
        },
        {
          dictValue: "4",
          dictLabel: "电话联系业务员",
        },
        {
          dictValue: "5",
          dictLabel: "网络联系业务员",
        },
        {
          dictValue: "6",
          dictLabel: "面访业务员",
        },
      ],

      enumOpt: {
        taskTypeList: [],
        channelList: [],
        manageComList: [],
        insuranceTypeList: [],
      },
      insuranceTypeList: [],
      paymentIntervalList: [],
      policyYearList: [],
      policyLabelList: [],
    };
  },
  mounted() {
    if (this.$route.query.aaa) {
      this.list = [
        {
          time: -30,
          waihu: true,
          note: false,
          rengong: false,
          rule: {
            waihuForm: {
              a: "1",
              vlFlag: true,
              ttt: [["00:00:00", "23:59:59"]],
              d: "2",
              h: 3,
              e: "1",
              f: "1",
            },
          },
        },
        {
          time: -20,
          waihu: false,
          note: true,
          rengong: true,
          rule: {
            rengongForm: {
              a: "1",
              vlFlag: true,
            },
            noteForm: {
              a: "1",
              ttt: [["00:00:00", "23:59:59"]],
              vlFlag: true,
              h: "1",
            },
          },
        },
        {
          time: 0,
          waihu: false,
          note: true,
          rengong: false,
          rule: {
            noteForm: {
              a: "1",
              ttt: [["00:00:00", "23:59:59"]],
              vlFlag: true,
              h: "1",
            },
          },
        },
      ];
    } else this.getInfo();
    this.getDict();
  },
  methods: {
    getInfo() {
      let serviceId = this.$route.query.serviceId;
      this.api.reachModeDetail({ serviceId }).then((res) => {
        console.log("this.list", res);
        if (res.data) {
          let list = res.data.uerReachModeResVOList.map((item) => {
            let rule = JSON.parse(item.rule),
              obj = {
                reachId: item.reachId,
                time: item.time,
                rule,
                waihu: rule.waihuForm ? true : false,
                note: rule.noteForm ? true : false,
                rengong: rule.rengongForm ? true : false,
              };
            return obj;
          });
          console.log("list", list);
          list.length > 0 && (this.list = list);
          this.heardData = res.data.uerServicePlanResVO;
        }
      });
    },
    submit() {
      this.loading = true;
      let list = this.list.map((item) => {
        return {
          serviceId: this.heardData.serviceId,
          time: item.time + "",
          rule: JSON.stringify(item.rule),
          reachId: item.reachId,
          aicc: item.rule.waihuForm ? true : false,
        };
      });

      console.log("this.list", this.list, list);
      this.api
        .reachModeAdd(list)
        .then((res) => {
          if (res.code == 200) {
            this.$message({
              message: "保存成功",
              type: "success",
            });
            this.goBack();
          }
        })
        .finally(() => (this.loading = false));
    },
    addItem(item, str) {
      console.log(item, str);
      if (!this[`${str}FormBack`]) {
        this[`${str}FormBack`] = JSON.parse(JSON.stringify(this[`${str}Form`]));
      }
      // this.modalType = 1;
      this.item = item;
      this.typeStr = str;
      this[`${str}Form`] = JSON.parse(JSON.stringify(this[`${str}FormBack`]));
      this[`${str}Visible`] = true;
    },
    deleteIten(item, str) {
      item[str] = false;
      delete item.rule[str + "Form"];
      // item.rule[str + "Form"] = null;
      console.log(item, str);
    },
    showItem(item, str) {
      if (item[str]) {
        // this.modalType = 0;
        this.item = item;
        this.typeStr = str;
        this[`${str}Form`] = JSON.parse(
          JSON.stringify(item.rule[str + "Form"])
        );
        this[`${str}Visible`] = true;
      }
    },
    submitItem() {
      let str = this.typeStr;
      this.$refs[`${str}Form`].validate((valid) => {
        if (valid) {
          this.item[str] = true;
          this.item.rule[str + "Form"] = JSON.parse(
            JSON.stringify(this[`${str}Form`])
          );
          this[`${str}Visible`] = false;
        }
      });
    },
    handleFocus(event) {
      console.log("Div is focused");
    },
    handleBlur(event) {
      console.log("Div is blurred");
    },
    goBack() {
      this.$router.go(-1);
    },
    numBlur(e) {
      // console.log(e, this.num);
      if (this.num === "") return;
      if (this.num.indexOf(".") > -1) {
        this.$message.error("只支持输入整数");
        return (this.num = "");
      }
      let time = +this.num;
      if (
        (!isNaN(time) || time === 0) &&
        !this.list.some((item) => item.time == time)
      ) {
        this.list.push({
          time,
          waihu: false,
          note: false,
          rengong: false,
          rule: {},
        });
        this.list = this.list.sort((a, b) => a.time - b.time);
        console.log(this.list);
      }
      this.num = "";
    },

    cancelItem() {
      this[`${this.typeStr}Visible`] = false;
    },
    getDict() {
      this.getDicts("sys_renewal_channel").then((res) => {
        if (res.code === 200) {
          this.enumOpt.channelList = res.data;
        }
      });
      this.getDicts("sys_renewal_manage_com").then((res) => {
        if (res.code === 200) {
          this.enumOpt.manageComList = res.data;
        }
      });
      this.getDicts("sys_renewal_definition_task_type").then((res) => {
        if (res.code === 200) {
          this.enumOpt.taskTypeList = res.data;
        }
      });
      this.getDicts("sys_renewal_insurance_type").then((res) => {
        if (res.code === 200) {
          this.enumOpt.insuranceTypeList = res.data;
        }
      });
      this.getDicts("sys_renewal_payment_interval").then((res) => {
        if (res.code === 200) {
          this.paymentIntervalList = res.data;
        }
      });
      this.getDicts("sys_renewal_policy_year").then((res) => {
        if (res.code === 200) {
          this.policyYearList = res.data;
        }
      });
      this.getDicts("sys_renewal_policy_label").then((res) => {
        if (res.code === 200) {
          this.policyLabelList = res.data;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../../styles/base.scss";

.header-btn {
  @include headerBtn;
}

.wrap {
  @include titleWrap;
}
.time-picker-box {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  position: relative;
}
.title-text {
  color: rgb(8, 117, 255);
  font-family: PingFang SC;
  font-size: 16px;
  font-weight: 600;
}
.title-back-box {
  display: flex;
  align-items: center;
  color: rgb(29, 29, 29);
  font-family: PingFang SC;
  font-size: 16px;
  img {
    width: 25px;
    height: 25px;
    margin-right: 15px;
  }
}
.header-line::before {
  width: 5px !important;
  margin-left: 10px;
  background: rgb(8, 117, 255);
}
.text-t {
  margin: -20px 21px 25px;
  font-family: PingFang SC;
  font-size: 14px;
  color: rgb(29, 29, 29);
  font-weight: 400;
}
.card-wrap {
  position: relative;
  display: flex;
  justify-content: space-between;
}
.opt-item {
  width: calc(100% - 20px);
  margin-left: 10px;
  height: 61px;
  text-align: center;
  line-height: 61px;
  border-radius: 4px;
  background: rgba(67, 140, 255, 0.07);
  color: rgba(0, 0, 0, 0.9);
  font-family: PingFang SC;
  font-size: 16px;
  font-weight: 600;
}
.right-card {
  border: 1px solid rgb(8, 117, 255);
  box-shadow: 0px 4px 20px 0px rgb(234, 234, 234);
  padding: 16px;
  overflow-x: scroll;
}
.s-columns-box {
  box-sizing: border-box;
  position: relative;
  min-width: 100%;
}
.s-columns {
  display: inline-block;
  vertical-align: top;
  position: relative;
  width: 182px;
  margin: 0 16px;
  .s-columns-title {
    position: relative;
    height: 52px;
    text-align: center;
    border-radius: 4px;
    background: rgba(88, 202, 134, 0.07);
    line-height: 52px;
    overflow: hidden;
    color: rgba(0, 0, 0, 0.9);
    font-family: PingFang SC;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 45px;
    .cha-cha-box {
      position: absolute;
      right: 0;
      top: 0;
      width: 15px;
      height: 15px;
      border-radius: 0px 4px 0px 1px;
      background: rgb(88, 202, 134);
      .cha-cha {
        position: absolute;
        font-size: 15px;
        right: 0px;
        top: 0px;
        bottom: 0;
        left: 0;
        color: #fff;
      }
    }
  }
  .s-column-item-box {
    height: 61px;
    text-align: center;
    line-height: 61px;
    margin: 5px 0;
    .item-plus {
      line-height: 61px;
      font-size: 22px;
      color: rgb(68, 138, 255);
    }
    .s-column-item {
      position: relative;
      display: flex;
      justify-content: center;
      height: 45px;
      line-height: 45px;
      align-items: center;
      .img-box {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 45px;
        height: 45px;
        border-radius: 50%;
        background: #f2f7ff;
        // background: red;
        margin-right: -20px;
        img {
          width: 25.67px;
          height: 25.67px;
        }
      }
      .item-text {
        width: 97px;
        height: 35px;
        line-height: 35px;
        text-align: center;
        border-radius: 17.5px;
        background: #f2f7ff;
        padding-left: 5px;
        // background: blue;
        a {
          font-family: PingFang SC;
          font-size: 14px;
          font-weight: 600;
          text-decoration-line: underline;
        }
      }
    }
  }
}

::v-deep {
  .el-dialog__header {
    display: none !important;
  }
}

.note-muban {
  margin: 0 20px 0 132px;
  box-sizing: border-box;
  border: 1px solid rgb(204, 204, 204);
  border-radius: 5px;
  background: rgb(245, 245, 245);
  padding: 16px;
  color: rgb(97, 97, 97);
}

.dialog-fromBtn {
  display: flex;
  justify-content: center;
  padding: 16px 32px 0 0;
}
.botton-btns {
  position: absolute;
  bottom: 30px;
  right: 40px;
}
</style>
